Code Playground

console.log("Event Fired")
import zim from "https://zimjs.org/cdn/016/zim_three";

// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen

new Frame(FIT, 1024, 768, black, black, ready, ["drabstract2.png", "intro.mp3"], "https://assets.codepen.io/2104200/");
function ready() {

// ~~~~~~~~~~~~~~~~~~~~~  ZIM

// FRONT PANEL

// TextureActive() - https://zimjs.com/docs.html?item=TextureActive
	// Parameters:
	// width, height, interactive, animated, color, color2, angle, borderColor, borderWidth, corner, pattern, scalePattern        
	const puzzle = new TextureActive({
		width:H-120,
		height:H,
		color:black.toAlpha(.8),
		corner:20,
		// backingOrbit:false // if not wanting to orbitControl on backing
	})
	.addTo();

TextureActive.makeLogo().scaleTo(puzzle,60).pos(0,20,CENTER,TOP,puzzle);

const scrambler = new Scrambler(chop(new Pic("drabstract2.png"),2,10))
		.scaleTo(puzzle,90,90)
		.center(puzzle)
		.mov(0,60);

scrambler.on("complete", ()=>{
		// animate the model using the ZIM animate function
		animate({
			target:canvasWindow,
			wait:.5,
			props:{"rotation.y":360*3*RAD}, 
			ease:"backInOut",
			time:1.5,
			call:()=>{
				canvasWindow.rotation.y=0;
				scrambler.scramble(1, 2, 3); // time, wait, num
			} // reset rotation
		});
	});
	scrambler.on("mousedown", ()=>{
		new Aud("intro.mp3").play({loop:true, volume:.2});    
	}, null, true); // run once
	new Rectangle(scrambler.width-1, scrambler.height-1, orange)
		.loc(scrambler, null, puzzle)
		.ord(-1); // put under the scrambler

// BACK PANEL
	const backing = new zim.TextureActive({
		width:puzzle.width,
		height:puzzle.height,
		color:black,
		corner:20,
		animated:false,
		interactive:false
	}).addTo();
	TextureActive.makeBacking(backing.width, backing.height).addTo(backing); // CANVAS WINDOW

// ~~~~~~~~~~~~~~~~~~~~~  THREE.JS

// Three() - https://zimjs.com/docs.html?item=Three
	// Parameters:
	// width, height, color, cameraPosition, cameraLook, interactive, resize, frame, ortho, textureActive, colorSpace, colorManagement, legacyLights, throttle, lay, full, xr, VRButton, xrBufferScale
	const three = new Three({
		width:window.innerWidth, 
		height:window.innerHeight, 
		cameraPosition:new THREE.Vector3(0,3,6),
		textureActive:true,
		xr:true
	});

const renderer = three.renderer;
	const scene = three.scene;
	const camera = three.camera;

const skyTexture = new THREE.TextureLoader().load("https://assets.codepen.io/2104200/room2.jpg");
	const skyBoxGeometry = new THREE.SphereGeometry(50, 32, 32);
	const skyBoxMaterial = new THREE.MeshBasicMaterial({map:skyTexture, side:THREE.BackSide});
	const skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
	scene.add(skyBox);

const floor = new THREE.Mesh(
		new THREE.CircleGeometry(40, 32).rotateX(-Math.PI / 2),
		new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:.1})
	);
	floor.position.y = -4;
	scene.add(floor);

const controls = new OrbitControls(camera, renderer.domElement);

// XRControllers() - https://zimjs.com/docs.html?item=XRControllers
	// Parameters:
	// three, type, color, highlightColor, lineColor, lineLength, threshhold
	// or pass in three.js XRControllerModelFactory for models of controllers into types:[model1, model2]
	const xrControllers = new XRControllers(three, "laser");

xrControllers.on("xrconnected", () => {

// XRMovement() - https://zimjs.com/docs.html?item=XRMovement
		// Parameters:
		// three, XRControllers, speed, acceleration, rotationSpeed, rotationAcceleration, hapticMax, verticalStrafe, radiusMax, threshhold, directionFix, boxMax
		const xrMovement = new XRMovement({
			three:three, 
			XRControllers:xrControllers, 
			speed:3, 
			rotationSpeed:3,
			radiusMax:40
		});

// XRTeleport() - https://zimjs.com/docs.html?item=XRTeleport
		// Parameters:
		// three, XRControllers, XRMovement, floor, offsetHeight, button, hand, markerColor, markerBlend
		new XRTeleport(three, xrControllers, xrMovement, floor, 4);

// Adjust scales and position for VR
		canvasWindow.scale.set(1,1,1);
		canvasWindow.position.y = 2;
		canvasWindow.position.z = -5;

canvasWindowBacking.scale.set(1,1,1);
		canvasWindowBacking.position.y = 2;
		canvasWindowBacking.position.z = -5;

});

// TextureActives() - https://zimjs.com/docs.html?item=TextureActive         
	// Parameters:
	// actives, threejs, zimThree, renderer, scene, camera, controls, layers, near, far, ignoreList, toggleKey, color, outerColor, damp
	const textureActives = new TextureActives([puzzle, backing], THREE, three, renderer, scene, camera, controls, 1);

// FRONT MESH
	// makePanel() - https://zimjs.com/docs.html?item=Three then look under methods
	// Parameters:
	// textureActive, textureActives, scale, curve, opacity, material, doubleSide, colorSpace
	const canvasWindow = three.makePanel(puzzle, textureActives, .01, .5);
	scene.add(canvasWindow);

// BACKING MESH
	const canvasWindowBacking = three.makePanel(backing, textureActives, .01, -.5, .5) // transparent and alpha  
	scene.add(canvasWindowBacking);
	canvasWindowBacking.rotation.y = 180*RAD; // flip it around the other way (RAD is ZIM constant for converting, DEG is the otherway)

}

// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Pic
// https://zimjs.com/docs.html?item=Aud
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Scrambler
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=mov
// https://zimjs.com/docs.html?item=ord
// https://zimjs.com/docs.html?item=scaleTo
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=TextureActive
// https://zimjs.com/docs.html?item=TextureActives
// https://zimjs.com/docs.html?item=toAlpha

Frontend Forever App